<template>
    <div>
        <div class="box">
            <div class="head">
                <div class="headLeft">
                    <a href="#">客服电话:</a>
                    <a href="#">010-95271258</a>
                </div>
                <div class="headRight">
                    <div class="icon">
                        <el-icon><Search /></el-icon>
                    </div>
                    <input type="text" maxlength="10">
                    <a href="#" @click="exit">登陆</a>
                    <a href="#" @click="goForgetPass">注册</a>
                </div>
            </div>
            <div class="contin">
                <div class="continLeft">
                    <span>在线考试</span>
                </div>
                <div class="continRight">
                    <a href="#">首页</a>
                    <a href="#">功能</a>
                    <a href="#">我们</a>
                </div>
            </div>
            <div class="imgBox">
                <div>
                    <h1>{{ title }}</h1>
                    <button @click="again">点击进入</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            title: '方便好用的云平台',
        }
    },
    methods: {
        //登陆
        again() {
            this.$router.replace({ path: '/selectExam' })
        },
        //退出登陆
        exit(){
            this.$store.commit('user/clearAll')
            this.$router.push({ path: '/login' })
        },
        //注册
        goForgetPass() {
            this.$message({
                message: '这个功能还没开发',
                type: 'error'
            })
        },
    },
}
</script>
<style scoped lang="scss">
body {
    height: 100vh;
    overflow: hidden;
}

.box {
    height: 600px;

    a {
        color: #8c8c8c;
        margin-right: 10px;
    }

    a:hover {
        color: red;
    }

    .head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        color: #8c8c8c;
        display: inline-block;
        border-bottom: 1px solid #d9d9d9;

        .headLeft {
            float: left;
            margin-left: 100px;
        }

        .headRight {
            float: right;
            margin-right: 110px;
            position: relative;

            input {
                width: 50px;
                border-radius: 10px;
                border: none;
                border: 1px solid #8c8c8c;
                margin-right: 20px;
            }

            .icon {
                position: absolute;
                right: 100px;
                top: 2.5px;

                :hover {
                    color: red;
                }
            }


        }
    }

    .contin {
        height: 80px;
        line-height: 80px;
        border-bottom: 1px solid #d9d9d9;

        .continLeft {
            float: left;
            color: #8c8c8c;
            margin-left: 100px;
            
        }

        .continRight {
            float: right;
            margin-right: 100px;

            a:nth-of-type(1) {
                border-bottom: 2px solid #4096ff;
            }

        }

        a {
            margin-right: 20px;
            font-weight: bold;
        }

        span {
            font-weight: bold;
            font-size: 20px;
        }
    }

    .imgBox {
        background: url(../../assets/home2.png);
        width: 100%;
        height: 100%;
        position: fixed;
        background-size: 100% 100%;

        h1 {
            margin-left: 82vh;
            margin-top: 150px;
            color: #595959;
            font-weight: normal;
        }

        button {
            border: none;
            height: 40px;
            width: 140px;
            font-size: 17px;
            color: white;
            margin: 20px;
            font-weight: bold;
            background-color: #237804;
            margin-left: 90vh;
        }
    }
}</style>